<template>
  <div class="card-wrap">
    <div class="header" v-if="header">
      <slot name="header">
        <div class="title">{{ title }}</div>
      </slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  header: { type: Boolean, default: false },
  title: { type: String, default: "" },
});
</script>

<style lang="scss" scoped>
.card-wrap {
  padding: 16px;
  width: 343px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;

  background: #fff;
  box-sizing: border-box;

  .header {
    position: relative;
    width: 100%;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #eff3f8;
    }
  }
  .content {
    padding-top: 16px;
  }
}
</style>